<template>

  <div class="mv-container">
    <div class="mv-wrap">
      <h3 class="title" @click="toMv()"> <i class="el-icon-arrow-left"></i> 视频详情</h3>
      <!-- mv -->
      <div class="video-wrap">
        <video controls :src="url"></video>
      </div>
      <div class="info-wrap">
        <div class="singer-info">
          <div class="avatar-wrap">
            <!-- 头像 -->
            <img :src="icon" alt="" />
          </div>
          <!-- 歌手名 -->
          <span class="name">{{ mvInfo.artistName }}</span>
        </div>
        <div class="mv-info">
          <!-- 标题 -->
          <h2 class="title">{{ mvInfo.name }}</h2>
          <span class="date">发布：2014-11-04</span>
          <!-- 播放次数 -->
          <span class="number">播放：{{ mvInfo.playCount }}次</span>
          <!-- 描述 -->
          <p class="desc">
            {{ mvInfo.desc }}
          </p>
        </div>
      </div>
      <!-- 精彩评论 -->
      <div class="comment-wrap">
        <p class="title">精彩评论<span class="number">(666)</span></p>
        <div class="comments-wrap">
          <div class="item">
            <div class="icon-wrap">
            </div>
            <div class="content-wrap">
              <div class="content">
                <span class="name">爱斯基摩：</span>
                <span class="comment">谁说的，长大了依旧可爱哈</span>
              </div>
              <div class="re-content">
                <span class="name">小苹果：</span>
                <span class="comment">还是小时候比较可爱</span>
              </div>
              <div class="date">2020-02-12 17:26:11</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 最新评论 -->

    </div>

    <div class="mv-recommend">
      <h3 class="title">相关推荐</h3>
      <div class="mvs">
        <div class="items">
          <div v-for="(item, index) in simiMvs" :key="index" class="item">
            <div class="img-wrap">
              <img :src="item.cover" alt="" />

              <div class="num-wrap">

                <div class="num">{{ item.playCount }}</div>
              </div>
              <span class="time">{{ item.duration }}</span>
            </div>
            <div class="info-wrap">
              <div class="name">{{ item.name |ellipsis}}</div>
              <div class="singer">{{ item.artistName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="d"></div>
  </div>
</template>

<script>
// 导入 axios
import axios from "axios";
export default {
  name: "mv",
  data() {
    return {
      // 总条数
      total: 20,
      // 页码
      page: 1,
      // 页容量
      limit: 10,
      // mv地址
      url: "",
      // 相关mv
      simiMvs: [],
      // mv的信息
      mvInfo: {},
      // 头像
      icon: "",
    };
  },
  created() {
    // 获取 相关的mv
    axios({
      url: "https://autumnfish.cn/simi/mv",
      method: "get",
      params: {
        mvid: this.$route.query.q,
      },
    }).then((res) => {
      // console.log(res)
      // 保存相关MV
      this.simiMvs = res.data.mvs;
      for (let i = 0; i < this.simiMvs.length; i++) {
        if (this.simiMvs[i].playCount > 100000) {
          this.simiMvs[i].playCount =
            parseInt(this.simiMvs[i].playCount / 10000) + "万";
        }
      }
      // console.log(res.data.mvs);
      // // 处理时长 毫秒 转为 分秒
      for (let i = 0; i < this.simiMvs.length; i++) {
        // 获取 总毫秒数
        let duration = this.simiMvs[i].duration;
        // 假定 	350750 毫秒
        // 秒 350750/1000  350秒
        // 分 350 /60
        // 秒 350 % 60
        let min = parseInt(duration / 1000 / 60);
        if (min < 10) {
          min = "0" + min;
        }
        let sec = parseInt((duration / 1000) % 60);
        if (sec < 10) {
          sec = "0" + sec;
        }
        // console.log(min + "|" + sec);
        this.simiMvs[i].duration = `${min}:${sec}`;
      }
    });

    this.detail();
    this.comment();

    this.nav();
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // axios
    toMv() {
      this.$router.go(-1);
    },
    // 获取mv播放地址
    nav() {
      axios({
        url: "https://autumnfish.cn/mv/url",
        method: "get",
        params: {
          // 获取url中的 id

          id: this.$route.query.q,
        },
      }).then((res) => {
        // console.log(res)
        this.url = res.data.data.url;
      });
    },
    // 获取评论数据
    comment() {
      axios({
        url: "https://autumnfish.cn/comment/mv",
        method: "get",
        params: {
          id: this.$route.query.q,
          limit: 10,
          offset: 0,
        },
      }).then((res) => {
        console.log(res);
      });
    },
    // 获取
    detail() {
      axios({
        url: "https://autumnfish.cn/mv/detail",
        method: "get",
        params: {
          mvid: this.$route.query.q,
        },
      }).then((res) => {
        // console.log(res)
        // mv的信息
        this.mvInfo = res.data.data;
        // 获取 歌手信息
        axios({
          url: "https://autumnfish.cn/artists",
          method: "get",
          params: {
            id: this.mvInfo.artists[0].id,
          },
        }).then((res) => {
          // console.log(res);
          // 歌手的封面信息
          this.icon = res.data.artist.picUrl;
        });
      });
    },
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 15) {
        return value.slice(0, 15) + "...";
      }
      return value;
    },
  },
};
</script>
<style scoped>
/* 整体 */
.mv-container {
  display: flex;
  position: absolute;
  top: 100px;
  left: 200px;
}
.el-icon-arrow-left {
  font-weight: 700;
}
.mv-container h3 {
  cursor: pointer;
}
/* 视频 */
.video-wrap video {
  width: 621px;
  height: 355px;
}
.desc {
  width: 621px;
}
.singer-info {
  display: flex;
}
/* 头像 */
.singer-info .avatar-wrap img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.singer-info .name {
  line-height: 60px;
  margin-left: 20px;
}
.d {
  height: 1000px;
}
.mv-container .title {
  padding-left: 10px;
}
.mv-recommend .item {
  padding-left: 10px;
  width: 360px;
  height: 100px;
}
.mv-recommend .item .img-wrap {
  position: relative;
}
.mv-recommend .item img {
  width: 140px;
  cursor: pointer;
  height: 80px;
}
/* 播放量 */
.mv-recommend .item .num {
  color: #fff;
  position: absolute;
  top: 1px;
  right: 220px;
  cursor: pointer;
}
/* 时间 */
.mv-recommend .item .time {
  color: #fff;
  position: absolute;
  bottom: 0px;
  cursor: pointer;
  right: 220px;
}
.mv-recommend .item .info-wrap {
  margin: -66px 0 0 150px;
}
</style>
